<template>
	<view class="page">
		<view class="nav" :style="'height:' + navBarHeight + 'rpx;'">
			<view class="nav-main">
				<!-- 胶囊区域 -->
				<view class="capsule-box"
					:style="'height:' + menuHeight + 'px; min-height:' + menuHeight + 'px; line-height:' + menuHeight + 'px; bottom:' + menuBotton + 'px;left:' + menuRight + 'px;'">
					<!-- 导航内容区域 -->
					
					<slot name="content"></slot>
				</view>
			</view>
		</view>
		<!-- 占位置 ——start -->
		<view :style="'height: ' + navBarHeight + 'rpx;' + 'background: white;width:100%'"></view>
		<!-- 占位置 ——end -->
	</view>

</template>

<script>
	export default {
		name: 'navigation',
		created() {
			 this.navBarHeight = getApp().globalData.navBarHeight, //导航栏高度
			 this.menuRight = getApp().globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
			 this.menuBotton = getApp().globalData.menuBotton,
			 this.menuHeight = getApp().globalData.menuHeight			   
		},
		data() {
			return {
				navBarHeight: 0,
				menuRight: 0,
				menuBotton: 0,
				menuHeight: 0
			}
		},
		methods: {
			
		}
	}

</script>

<style lang="scss" scoped>
	// components/navigation/index.wxss
	.page {
		width: 100%;
		// z-index: 1000;
		.nav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			z-index: 1000;
			// background-color: pink;
		}
		
		.nav-main {
			width: 100%;
			height: 100%;
			position: relative;
			background-color: #f8f8f8;
		}
		
		.nav .capsule-box {
			position: absolute;
			box-sizing: border-box;
			width: 100%;
		}
	}


</style>
